<template>
    <div class="preview-container" :class="boxClass" :style="boxStyle">
        <div class="row-list-box" ref="rowListBox" >
            <div class="row-list" ref="rowList">
                <page-row 
                v-for="(row,index) in rowList" :key="row.id" 
                :index="index"  :type="row.type" :id="row.id" :style="row.style"  :page-length="rowList.length" :model-list="row.modelList"
                @focus="handleFocus"
                @del = "handleDelRow"
                @up = "handleRowUp"
                @down = "handleRowDown"
                @update-model = "handleUpdateModel"
                @set-style = "handleRowStyle"

                :focus = "current == index"
                ></page-row>
            </div>
        </div>
        <bi-button class="add-row" icon="fa-plus" type="light" @click="handleAddRow()">添加行</bi-button>
    </div>
</template>

<script>
import addRowDialog from 'add-row-dialog.vue';
import rowStyleDialog from './row-style-dialog.vue';
import PageRow from 'row.vue';
export default{
    emits:['update'],
    components:{
        PageRow,
    },
    computed:{
        boxClass(){
            let classList = [];
            
            if (this.pageStyle && this.pageStyle['backgroundColor'] && this.pageStyle['backgroundColor']!=''){

            }else{
                classList.push('opacity');
            }

            return classList;
        },
        boxStyle(){
            let style = {};
            if (this.pageStyle && Object.keys(this.pageStyle).length > 0){
                if (this.pageStyle['backgroundColor'] && this.pageStyle['backgroundColor']!=''){
                    style['background-color'] = this.pageStyle['backgroundColor'];
                }

                if (this.pageStyle['pagePadding'] && this.pageStyle['pagePadding']!=''){
                    style['--page-padding'] = this.pageStyle['pagePadding'];
                }

                if (this.pageStyle['rowPadding'] && this.pageStyle['rowPadding']!=''){
                    style['--row-padding'] = this.pageStyle['rowPadding'];
                }

                if (this.pageStyle['modelPadding'] && this.pageStyle['modelPadding']!=''){
                    style['--model-padding'] = this.pageStyle['modelPadding'];
                    
                }
            }
            return style;
        },
    },
    provide(){
        return {
            repaint:()=>{
                this.repaint();
            },
        }
    },
    data(){
        return {
            rowList:[],
            current:0,
            flashTimer:0
        }
    },
    props:{
        pageStyle:{
            type:Object,
            default:{}
        },
        list:{
            type:Array,
            default:[]
        }
    },
    methods:{
        update(){
            this.$emit('update',this.rowList);
        },
        handleAddRow(){
           this.$dialog({
              type:'vue',
              content:admin.createApp(addRowDialog),
              callback:(type)=>{
                this.addRow(type);
                this.$nextTick(()=>{
                    this.flashHeight();
                });
              }
           });
        },
        addRow(type){
            let id = 'COL' + new Date().getTime().toString() + Math.random().toString().substr(2,5);
            let modelList  = ['empty'];
            if (type == 'row-2'){
                modelList = [
                    'empty',
                    'empty'
                ];
            }

            if (type== 'row-3'){
                modelList = [
                    'empty',
                    'empty',
                    'empty'
                ];
            }
            

            this.rowList.push({
                type,
                id,
                modelList,
                style:{}
            })

            this.update();
        },
        repaint(){
            setTimeout(()=>{
                this.flashHeight();
            },50);
        },
        flashHeight(){
            if (this.$refs.rowListBox && this.$refs.rowList){
                this.flashTimer = setTimeout(()=>{
                    this.$refs.rowListBox.style.height = this.$refs.rowList.clientHeight * 0.5 + 'px';
                },10);
            }
        },
        handleFocus(index){
            if (this.current != index){
                this.current = index;
            }
        },
        handleDelRow(index){
            this.$confirm('是否删除该行？',()=>{
                this.rowList.splice(index,1);
                this.repaint();
                this.update();
            });
        },
        handleRowUp(index){
            if (index==0) return;
            let temp = this.rowList[index];
            this.rowList[index] = this.rowList[index - 1];
            this.rowList[index - 1] = temp;
            this.update();
            this.current = index - 1;
        },
        handleRowDown(index){
            if (index == this.rowList.length - 1) return;
            let temp = this.rowList[index];
            this.rowList[index] = this.rowList[index + 1];
            this.rowList[index + 1] = temp;
            this.update();
            this.current = index + 1;
        },
        handleRowStyle(index){
            console.log(this.rowList[index].style);
            this.$dialog({
                type:'vue',
                content:admin.createApp(rowStyleDialog,{param:this.rowList[index].style}),
                callback:(style)=>{
                    
                    this.rowList[index].style = style;
                    this.update();
                    return true;
                }
            });
        },
        handleUpdateModel(index,modelList){
            this.rowList[index].modelList = modelList;
            console.log('dddd');
            this.update();
        }
    },
    mounted(){
        this.rowList = this.list;   
        if (this.rowList.length == 0){
            this.addRow('row-fluid');
            this.addRow('row-1');
            this.addRow('row-2');
            this.addRow('row-3');
        }
        
        this.$nextTick(()=>{
            this.flashHeight();
        });
    },
    beforeUnmount(){
        clearTimeout(this.flashTimer);
    }
}
</script>


<style>
.preview-container{
    width: 375px;
    min-height: 100%;
    margin: 0 auto;
    position: relative;
    --row-padding: 10px;
    --page-padding: 10px;
    --model-gap: 10px;
    --scale:0.5;
}

.preview-container.opacity{
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}


.preview-container .row-list-box{
    width: calc(100% + 40px) ;
    
    box-sizing: content-box;
    overflow-y: hidden;
    z-index: 2;
    position: relative;
}

.preview-container .row-list{
    width: 750px;
    transform: scale(var(--scale));
    padding-left:var(--page-padding);
    padding-right:var(--page-padding);
    transform-origin:left top;
    display: flex;
    flex-direction:column;
}

.preview-container .add-row{
    margin: 10px 5px;
    width: calc(100% - 10px);
}



.preview-container .tool{
    position: absolute;
}
</style>